<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feed</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/feed.css">

    
</head>
<body>
    <header class="w">
        <div class="top">
            <div class="left">
                <a href="#"><img src="../images/logo-red.svg" alt=""></a>
                <div class="search">
                    <form action="">
                        <button class="button-search">
                            <img src="../images/search.png" alt="">
                        </button>
                        <input type="text" placeholder="What are you looking for?" name="" id="" value="">
                        <div class="button-all">
                            <div class="yuanjiao"></div>
                            <button>
                                <span>Track</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="right">
                <div class="right-sign">
                    <a href="#" class="sign-up"><span>Sign up</span></a>
                    <a href="../html/denglu.html" class="sign-in"><span>Sign in</span></a>
                    <a href="#" class="start-selling"><span>Start Selling</span></a>
                </div>
                <a href="#" class="gouwuche"><img src="../images/gouwuche.png" alt=""></a>
            </div> 
        </div>
        <nav class="bottom">
            <ul>
                <li class="del-left-margin"><a href="../index.html">Home</a></li>
                <li><a href="feed.html">Feed</a></li>
                <li class="tracks">
                    <a href="../html/tracks.html">Tracks</a>
                        <div class="dropdown-content">
                            <div class="row">
                                <h2>BROWSE</h2>
                                <a href="#">
                                        <img src="../images/aixing.png" alt=""><span>Top Charts</span>
                                 </a>
                                <a href="#">
                                        <img src="../images/aixing.png" alt=""><span>Free Beats</span>
                                </a>
                                <a href="#">
                                        <img src="../images/aixing.png" alt=""><span>Exclusive Only</span>
                                </a>
                                <a href="#">
                                        <img src="../images/aixing.png" alt=""><span>Public Playlists</span>
                                </a>
                            </div>

                            <div class="row">
                                <h2>TRENDING SEARCHES</h2>
                                <a href="#">
                                    <span>Top Charts</span>
                                </a>
                                <a href="#">
                                    <span>Free Beats</span>
                                </a>
                                <a href="#">
                                    <span>Exclusive Only</span>
                                </a>
                                <a href="#">
                                    <span>Public Playlists</span>
                                </a>
                                <a href="#">
                                    <span>Top Charts</span>
                                </a>
                                <a href="#">
                                    <span>Free Beats</span>
                                </a>
                                <a href="#">
                                    <span>Exclusive Only</span>
                                </a>
                                <a href="#">
                                    <span>Public Playlists</span>
                                </a>
                            </div>

                            <div class="row">
                                <h2>GENRES</h2>
                                <a href="#">
                                    <img src="../images/aixing.png" alt=""><span>All Genre</span>
                                </a>
                                <a href="#">
                                    <img src="../images/aixing.png" alt=""><span>Hip Hop</span>
                                </a>
                                <a href="#">
                                    <img src="../images/aixing.png" alt=""><span>Pop</span>
                                </a>
                                <a href="#">
                                    <img src="../images/aixing.png" alt=""><span>R&B</span>
                                </a>
                                <a href="#">
                                    <img src="../images/aixing.png" alt=""><span>Rock</span>
                                </a>
                                <a href="#">
                                    <img src="../images/aixing.png" alt=""><span>Electronic</span>
                                </a>
                                <a href="#">
                                    <img src="../images/aixing.png" alt=""><span>Reggae</span>
                                </a>
                                <a href="#">
                                    <img src="../images/aixing.png" alt=""><span>Country</span>
                                </a>
                            </div>
                        </div>
                </li>
                <li><a href="gift-cards.html">Gift Cards </a><span class="new">New</span></li>
            </ul>
        </nav>
    </header>

    <div class="w title">
        <h1>Your Feed</h1>
        <div class="types">
            <div class="types-box">
                <span>All types</span>
                <i><img src="../images/xiala-bai.png" alt=""></i>
            </div>
        </div>
    </div>

    <section>
        <div class="w big-box">
            <div class="w-left">
                <h2>Trending searches</h2>
                <div class="left-info">
                    <a href="#">Jusa Riddim</a>
                    <p>Sponsored</p>
                </div>
                <div class="left-info">
                    <a href="#"> Heyo Digz </a>
                    <p>Sponsored</p>
                </div>
                <div class="left-info">
                    <a href="#">beatstars</a>
                    <p> 12.5k results</p>
                </div>
                <div class="left-info">
                    <a href="#">free</a>
                    <p>941.7k results</p>
                </div>
                <div class="left-info">
                    <a href="#">gunna</a>
                    <p>291.3k results</p>
                </div>
                <div class="left-info">
                    <a href="#">polo g</a>
                    <p>146.5k results</p>
                </div>
                <div class="left-info">
                    <a href="#">lil durk</a>
                    <p>178.1k results</p>
                </div>
                
            </div>
            <div class="w-middle">
                <div class="middle-title">
                    <div class="left">
                        <div class="img"><img src="../images/zuanshi.png" alt=""></div>
                        <div class="text"> Win an INSANE Prize Package Featuring Swede of 808 Mafia! </div>
                    </div>
                    <div class="right">
                        <span> Submit Beats </span>
                        <img src="../images/zuojiantou.png" alt="">
                    </div>
                </div>
                
                <div class="flow-card">
                    <div class="top">
                        <div class="img">
                            <img src="../images/j1.png" alt="">
                        </div>
                        <div class="top-email">
                            <a href="#">
                                <strong>AUDIO RADICAL</strong>
                                <span>@audioradical&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;3d</span>
                            </a>
                        </div>
                        <div class="ad">AD</div>
                    </div>
                    <div class="left">
                        <img src="../images/j8.png" alt="" style="width:150px; height: 150px; border-radius: 5px;">
                    </div>
                    <div class="right">
                        <div class="bofang-name">
                            <button class="bofang">
                                <img src="../images/bofang.png" alt="">
                            </button>
                            <div class="a"><a href="#"> Brick (Cel M Beats × Luhkim) </a></div>
                        </div>
                        <div class="beat-type">
                            <a href="#">
                                <strong>Beat</strong> 
                                <span>by</span> 
                                <strong>Cel M Beats</strong>
                                <span>@audioradical</span>
                            </a>
                        </div>
                        <div class="time">Released on Nov 10, 2021</div>
                        <div class="zuozhe">Produced × Luhkim</div>
                        <button class="shop">
                            <img src="../images/gouwuche.png" alt="">
                            <span>$20.00</span>
                        </button>
                    </div>
                    <div class="bottom">
                        <div class="dianzan">
                            <button class="tubiao"><img src="../images/like.png" alt=""></button>
                            <div class="shuzi">28</div>
                        </div>
                        <div class="zhuanfa">
                            <button class="tubiao"><img src="../images/ic_Repost.png" alt=""></button>
                            <div class="shuzi">4</div>
                        </div>
                        <div class="pinglun">
                            <button class="tubiao"><img src="../images/comments.png" alt=""></button>
                            <div class="shuzi">2</div>
                        </div>
                        <div class="fenxiang">
                            <button class="tubiao"><img src="../images/share.png" alt=""></button>
                        </div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="top">
                        <div class="img">
                            <img src="../images/j1.png" alt="">
                        </div>
                        <div class="top-email">
                            <a href="#">
                                <strong>AUDIO RADICAL</strong>
                                <span>@audioradical&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;3d</span>
                            </a>
                        </div>
                        <div class="ad">AD</div>
                    </div>
                    <div class="left">
                        <img src="../images/song1.png" alt="" style="width:150px; height: 150px; border-radius: 5px;">
                    </div>
                    <div class="right">
                        <div class="bofang-name">
                            <button class="bofang">
                                <img src="../images/bofang.png" alt="">
                            </button>
                            <div class="a"><a href="#"> Brick (Cel M Beats × Luhkim) </a></div>
                        </div>
                        <div class="beat-type">
                            <a href="#">
                                <strong>Beat</strong> 
                                <span>by</span> 
                                <strong>Cel M Beats</strong>
                                <span>@audioradical</span>
                            </a>
                        </div>
                        <div class="time">Released on Nov 10, 2021</div>
                        <div class="zuozhe">Produced × Luhkim</div>
                        <button class="shop">
                            <img src="../images/gouwuche.png" alt="">
                            <span>$20.00</span>
                        </button>
                    </div>
                    <div class="bottom">
                        <div class="dianzan">
                            <button class="tubiao"><img src="../images/like.png" alt=""></button>
                            <div class="shuzi">28</div>
                        </div>
                        <div class="zhuanfa">
                            <button class="tubiao"><img src="../images/ic_Repost.png" alt=""></button>
                            <div class="shuzi">4</div>
                        </div>
                        <div class="pinglun">
                            <button class="tubiao"><img src="../images/comments.png" alt=""></button>
                            <div class="shuzi">2</div>
                        </div>
                        <div class="fenxiang">
                            <button class="tubiao"><img src="../images/share.png" alt=""></button>
                        </div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="top">
                        <div class="img">
                            <img src="../images/j1.png" alt="">
                        </div>
                        <div class="top-email">
                            <a href="#">
                                <strong>AUDIO RADICAL</strong>
                                <span>@audioradical&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;3d</span>
                            </a>
                        </div>
                        <div class="ad">AD</div>
                    </div>
                    <div class="left">
                        <img src="../images/j1.png" alt="" style="width:150px; height: 150px; border-radius: 5px;">
                    </div>
                    <div class="right">
                        <div class="bofang-name">
                            <button class="bofang">
                                <img src="../images/bofang.png" alt="">
                            </button>
                            <div class="a"><a href="#"> Brick (Cel M Beats × Luhkim) </a></div>
                        </div>
                        <div class="beat-type">
                            <a href="#">
                                <strong>Beat</strong> 
                                <span>by</span> 
                                <strong>Cel M Beats</strong>
                                <span>@audioradical</span>
                            </a>
                        </div>
                        <div class="time">Released on Nov 10, 2021</div>
                        <div class="zuozhe">Produced × Luhkim</div>
                        <button class="shop">
                            <img src="../images/gouwuche.png" alt="">
                            <span>$20.00</span>
                        </button>
                    </div>
                    <div class="bottom">
                        <div class="dianzan">
                            <button class="tubiao"><img src="../images/like.png" alt=""></button>
                            <div class="shuzi">28</div>
                        </div>
                        <div class="zhuanfa">
                            <button class="tubiao"><img src="../images/ic_Repost.png" alt=""></button>
                            <div class="shuzi">4</div>
                        </div>
                        <div class="pinglun">
                            <button class="tubiao"><img src="../images/comments.png" alt=""></button>
                            <div class="shuzi">2</div>
                        </div>
                        <div class="fenxiang">
                            <button class="tubiao"><img src="../images/share.png" alt=""></button>
                        </div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="top">
                        <div class="img">
                            <img src="../images/j1.png" alt="">
                        </div>
                        <div class="top-email">
                            <a href="#">
                                <strong>AUDIO RADICAL</strong>
                                <span>@audioradical&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;3d</span>
                            </a>
                        </div>
                        <div class="ad">AD</div>
                    </div>
                    <div class="left">
                        <img src="../images/j3.png" alt="" style="width:150px; height: 150px; border-radius: 5px;">
                    </div>
                    <div class="right">
                        <div class="bofang-name">
                            <button class="bofang">
                                <img src="../images/bofang.png" alt="">
                            </button>
                            <div class="a"><a href="#"> Brick (Cel M Beats × Luhkim) </a></div>
                        </div>
                        <div class="beat-type">
                            <a href="#">
                                <strong>Beat</strong> 
                                <span>by</span> 
                                <strong>Cel M Beats</strong>
                                <span>@audioradical</span>
                            </a>
                        </div>
                        <div class="time">Released on Nov 10, 2021</div>
                        <div class="zuozhe">Produced × Luhkim</div>
                        <button class="shop">
                            <img src="../images/gouwuche.png" alt="">
                            <span>$20.00</span>
                        </button>
                    </div>
                    <div class="bottom">
                        <div class="dianzan">
                            <button class="tubiao"><img src="../images/like.png" alt=""></button>
                            <div class="shuzi">28</div>
                        </div>
                        <div class="zhuanfa">
                            <button class="tubiao"><img src="../images/ic_Repost.png" alt=""></button>
                            <div class="shuzi">4</div>
                        </div>
                        <div class="pinglun">
                            <button class="tubiao"><img src="../images/comments.png" alt=""></button>
                            <div class="shuzi">2</div>
                        </div>
                        <div class="fenxiang">
                            <button class="tubiao"><img src="../images/share.png" alt=""></button>
                        </div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="top">
                        <div class="img">
                            <img src="../images/j1.png" alt="">
                        </div>
                        <div class="top-email">
                            <a href="#">
                                <strong>AUDIO RADICAL</strong>
                                <span>@audioradical&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;3d</span>
                            </a>
                        </div>
                        <div class="ad">AD</div>
                    </div>
                    <div class="left">
                        <img src="../images/j4.png" alt="" style="width:150px; height: 150px; border-radius: 5px;">
                    </div>
                    <div class="right">
                        <div class="bofang-name">
                            <button class="bofang">
                                <img src="../images/bofang.png" alt="">
                            </button>
                            <div class="a"><a href="#"> Brick (Cel M Beats × Luhkim) </a></div>
                        </div>
                        <div class="beat-type">
                            <a href="#">
                                <strong>Beat</strong> 
                                <span>by</span> 
                                <strong>Cel M Beats</strong>
                                <span>@audioradical</span>
                            </a>
                        </div>
                        <div class="time">Released on Nov 10, 2021</div>
                        <div class="zuozhe">Produced × Luhkim</div>
                        <button class="shop">
                            <img src="../images/gouwuche.png" alt="">
                            <span>$20.00</span>
                        </button>
                    </div>
                    <div class="bottom">
                        <div class="dianzan">
                            <button class="tubiao"><img src="../images/like.png" alt=""></button>
                            <div class="shuzi">28</div>
                        </div>
                        <div class="zhuanfa">
                            <button class="tubiao"><img src="../images/ic_Repost.png" alt=""></button>
                            <div class="shuzi">4</div>
                        </div>
                        <div class="pinglun">
                            <button class="tubiao"><img src="../images/comments.png" alt=""></button>
                            <div class="shuzi">2</div>
                        </div>
                        <div class="fenxiang">
                            <button class="tubiao"><img src="../images/share.png" alt=""></button>
                        </div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="top">
                        <div class="img">
                            <img src="../images/j1.png" alt="">
                        </div>
                        <div class="top-email">
                            <a href="#">
                                <strong>AUDIO RADICAL</strong>
                                <span>@audioradical&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;3d</span>
                            </a>
                        </div>
                        <div class="ad">AD</div>
                    </div>
                    <div class="left">
                        <img src="../images/j5.png" alt="" style="width:150px; height: 150px; border-radius: 5px;">
                    </div>
                    <div class="right">
                        <div class="bofang-name">
                            <button class="bofang">
                                <img src="../images/bofang.png" alt="">
                            </button>
                            <div class="a"><a href="#"> Brick (Cel M Beats × Luhkim) </a></div>
                        </div>
                        <div class="beat-type">
                            <a href="#">
                                <strong>Beat</strong> 
                                <span>by</span> 
                                <strong>Cel M Beats</strong>
                                <span>@audioradical</span>
                            </a>
                        </div>
                        <div class="time">Released on Nov 10, 2021</div>
                        <div class="zuozhe">Produced × Luhkim</div>
                        <button class="shop">
                            <img src="../images/gouwuche.png" alt="">
                            <span>$20.00</span>
                        </button>
                    </div>
                    <div class="bottom">
                        <div class="dianzan">
                            <button class="tubiao"><img src="../images/like.png" alt=""></button>
                            <div class="shuzi">28</div>
                        </div>
                        <div class="zhuanfa">
                            <button class="tubiao"><img src="../images/ic_Repost.png" alt=""></button>
                            <div class="shuzi">4</div>
                        </div>
                        <div class="pinglun">
                            <button class="tubiao"><img src="../images/comments.png" alt=""></button>
                            <div class="shuzi">2</div>
                        </div>
                        <div class="fenxiang">
                            <button class="tubiao"><img src="../images/share.png" alt=""></button>
                        </div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="top">
                        <div class="img">
                            <img src="../images/j1.png" alt="">
                        </div>
                        <div class="top-email">
                            <a href="#">
                                <strong>AUDIO RADICAL</strong>
                                <span>@audioradical&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;3d</span>
                            </a>
                        </div>
                        <div class="ad">AD</div>
                    </div>
                    <div class="left">
                        <img src="../images/j6.png" alt="" style="width:150px; height: 150px; border-radius: 5px;">
                    </div>
                    <div class="right">
                        <div class="bofang-name">
                            <button class="bofang">
                                <img src="../images/bofang.png" alt="">
                            </button>
                            <div class="a"><a href="#"> Brick (Cel M Beats × Luhkim) </a></div>
                        </div>
                        <div class="beat-type">
                            <a href="#">
                                <strong>Beat</strong> 
                                <span>by</span> 
                                <strong>Cel M Beats</strong>
                                <span>@audioradical</span>
                            </a>
                        </div>
                        <div class="time">Released on Nov 10, 2021</div>
                        <div class="zuozhe">Produced × Luhkim</div>
                        <button class="shop">
                            <img src="../images/gouwuche.png" alt="">
                            <span>$20.00</span>
                        </button>
                    </div>
                    <div class="bottom">
                        <div class="dianzan">
                            <button class="tubiao"><img src="../images/like.png" alt=""></button>
                            <div class="shuzi">28</div>
                        </div>
                        <div class="zhuanfa">
                            <button class="tubiao"><img src="../images/ic_Repost.png" alt=""></button>
                            <div class="shuzi">4</div>
                        </div>
                        <div class="pinglun">
                            <button class="tubiao"><img src="../images/comments.png" alt=""></button>
                            <div class="shuzi">2</div>
                        </div>
                        <div class="fenxiang">
                            <button class="tubiao"><img src="../images/share.png" alt=""></button>
                        </div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="top">
                        <div class="img">
                            <img src="../images/j1.png" alt="">
                        </div>
                        <div class="top-email">
                            <a href="#">
                                <strong>AUDIO RADICAL</strong>
                                <span>@audioradical&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;3d</span>
                            </a>
                        </div>
                        <div class="ad">AD</div>
                    </div>
                    <div class="left">
                        <img src="../images/j7.png" alt="" style="width:150px; height: 150px; border-radius: 5px;">
                    </div>
                    <div class="right">
                        <div class="bofang-name">
                            <button class="bofang">
                                <img src="../images/bofang.png" alt="">
                            </button>
                            <div class="a"><a href="#"> Brick (Cel M Beats × Luhkim) </a></div>
                        </div>
                        <div class="beat-type">
                            <a href="#">
                                <strong>Beat</strong> 
                                <span>by</span> 
                                <strong>Cel M Beats</strong>
                                <span>@audioradical</span>
                            </a>
                        </div>
                        <div class="time">Released on Nov 10, 2021</div>
                        <div class="zuozhe">Produced × Luhkim</div>
                        <button class="shop">
                            <img src="../images/gouwuche.png" alt="">
                            <span>$20.00</span>
                        </button>
                    </div>
                    <div class="bottom">
                        <div class="dianzan">
                            <button class="tubiao"><img src="../images/like.png" alt=""></button>
                            <div class="shuzi">28</div>
                        </div>
                        <div class="zhuanfa">
                            <button class="tubiao"><img src="../images/ic_Repost.png" alt=""></button>
                            <div class="shuzi">4</div>
                        </div>
                        <div class="pinglun">
                            <button class="tubiao"><img src="../images/comments.png" alt=""></button>
                            <div class="shuzi">2</div>
                        </div>
                        <div class="fenxiang">
                            <button class="tubiao"><img src="../images/share.png" alt=""></button>
                        </div>
                    </div>
                </div>

            </div>
            <div class="w-right">
                <h2>Who to follow</h2>
                <ul>
                    <li>
                        <div class="img"><img src="../images/use1.png" alt=""></div>
                        <div class="info">
                            <div class="usename">
                                <a href="#">Frabtz AA</a>
                                <div class="ad">AD</div>
                            </div>
                            <span>1.4k followers</span>
                        </div>
                        <div class="button">
                            <button><img src="../images/yonghu.png" alt=""></button>
                        </div>
                    </li>

                    <li>
                        <div class="img"><img src="../images/use2.png" alt=""></div>
                        <div class="info">
                            <div class="usename">
                                <a href="#">GodzayKatana</a>
                            </div>
                            <span>5.1k followers</span>
                        </div>
                        <div class="button">
                            <button><img src="../images/yonghu.png" alt=""></button>
                        </div>
                    </li>

                    <li>
                        <div class="img"><img src="../images/use3.jpg" alt=""></div>
                        <div class="info">
                            <div class="usename">
                                <a href="#"> DjSwift813 </a>
                                <div class="ad">AD</div>
                            </div>
                            <span>12.7k followers</span>
                        </div>
                        <div class="button">
                            <button><img src="../images/yonghu.png" alt=""></button>
                        </div>
                    </li>

                    <li>
                        <div class="img"><img src="../images/use4.png" alt=""></div>
                        <div class="info">
                            <div class="usename">
                                <a href="#"> Andyr </a>
                            </div>
                            <span>26.6k followers</span>
                        </div>
                        <div class="button">
                            <button><img src="../images/yonghu.png" alt=""></button>
                        </div>
                    </li>

                    <li>
                        <div class="img"><img src="../images/use5.png" alt=""></div>
                        <div class="info">
                            <div class="usename">
                                <a href="#">Mantra</a>
                            </div>
                            <span>329.4k followers</span>
                        </div>
                        <div class="button">
                            <button><img src="../images/yonghu.png" alt=""></button>
                        </div>
                    </li>

                    <li>
                        <div class="img"><img src="../images/use6.jpg" alt=""></div>
                        <div class="info">
                            <div class="usename">
                                <a href="#">WyshmasterBeats</a>
                            </div>
                            <span>39.4k followers</span>
                        </div>
                        <div class="button">
                            <button><img src="../images/yonghu.png" alt=""></button>
                        </div>
                    </li>

                    <li>
                        <div class="img"><img src="../images/use1.png" alt=""></div>
                        <div class="info">
                            <div class="usename">
                                <a href="#"> DJ Pain 1 </a>
                            </div>
                            <span>5.1k followers</span>
                        </div>
                        <div class="button">
                            <button><img src="../images/yonghu.png" alt=""></button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </section>

</body>
</html>